<template>
	<div class="content">
		<div class="pd_tb20">
			<h2>详情信息</h2>
		</div>
		<div class="ccc">
			<img style="height: 400px;box-shadow: 4px 4px 14px #929292;border-radius: 4px;margin: 6px 0;" :src="xq.query.img" alt="">
			<p>{{xq.query.title}}</p>
			<p>{{xq.query.content}}</p>
			<p>{{xq.query.create_time}}</p>
			<div @click="backs" style="width: 100px;background: #279c55;color: #fff;padding: 16px 20px;cursor: pointer;text-align: center;">
				<span>返回上一页</span>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ElMessage,ElMessageBox
	} from 'element-plus'
	import {
		reactive,onMounted
	} from 'vue'
	import {
		useRouter,useRoute
	} from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	let xq = reactive({
		query:{
			
		}
	})
	onMounted(()=>{
		xq.query = route.query
		console.log(xq.query)
	})
	let backs = ()=>{
		router.go(-1)
	}
</script>

<style scoped>
.content{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px 0;
}
.ccc{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ccc p{
	padding: 10px 0;
}
.pd_tb20{
	padding:20px 0;
}
</style>